<template>
  <div id="index">
    <el-container>
      <!-- 顶部 -->
      <el-header>
        <div class="header-box">
          <my-header></my-header>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边 -->
        <el-aside :width="isCollapse ? '64px': '200px'">
          <my-aside @childFn="parentFn"></my-aside>
        </el-aside>
        <el-container>
          <!-- 中部 -->
          <el-main>
            <router-view></router-view>
          </el-main>
          <!-- 底部 -->
          <el-footer>
            <my-footer></my-footer>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import Aside from '@/components/Aside.vue'

export default {
    components: {
        'my-footer': Footer,
        'my-header': Header,
        'my-aside': Aside
    },
    name: 'LoginIndex',
    data () {
        return {
            isCollapse: false
        }
    },
    methods: {
        parentFn (payload) {
            console.log(payload)
            this.isCollapse = payload
        }
    }
    // mounted() {}
}
</script>

<style scoped>
#index {
  width: 100%;
  height: 100%;
}

.el-header {
  background-color: #1c2327;
  height: 50px !important;
  line-height: 50px;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.el-aside {
  background-color: #373d41;
  color: #333;
  text-align: left;
  min-height: calc(100vh - 50px);
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  margin: 0px;
  padding: 0px;
}

.el-footer {
  /* background-color: #1c2327; */
  background-color: #fff;
  color: #666;
  text-align: center;
  height: 50px !important;
  line-height: 50px;
}
</style>
